<template>
  <div class="order-info">
    <unify-header></unify-header>
    <div class="container" ref="container">
      <div class="bread-crumbs">
        <ul class="wrapper ">
          <li><a href="/center/works.html">个人中心</a></li>
          <li><a href="/center/order.html">订单管理</a></li>
          <li class="current"><span>订单详情</span></li>
        </ul>
      </div>
      <div>
        <h4 class="headings">
          <div class="wrapper">订单信息</div>
        </h4>
        <div class="flow-chart">
          <div class="wrapper">
            <ul class="state-list">
              <li v-for="(item,index) in stateList" :key="index" class="item"
                  :class="['state-icon-'+(index+1),{current:item.current}]">
                <i class="icon"></i>
                <label>{{item.label}}</label>
                <span class="time">{{item.time}}</span>
              </li>
            </ul>
          </div>
          <div class="flow-prompt">
            <div class="wrapper">
              <div v-for="(item,index) in stateList" :key="index" v-show="item.current" class="prompt">
                <span v-html="item.prompt"></span>
                <a href="javascript:void(0);" @click="pay(orderInfo[0])" class="pay-btn" v-if="!index && item.current">立即付款</a>
              </div>
            </div>
          </div>
        </div>
        <div class="logistics-info" v-if="logistics.status === 1">
          <div class="wrapper">
            <span class="row">物流信息：</span>
            <span class="row">运单号码：{{logistics.data.code}}</span>
            <span class="row">物流公司：{{logistics.data.companyName}}</span>
            <dl class="logistics-details">
              <dt>{{orderInfo[0].status > 10 ? '已签收' : '运输中'}}</dt>
              <dd v-for="item in logistics.data.trace[0].info">
                <span class="date">{{item.accept_time[0]}}</span>
                <span class="weeks">{{['星期一','星期二','星期三','星期四','星期五','星期六','星期日'][item.accept_time[2].getDay()-1]}}</span>
                <span class="time">{{item.accept_time[1]}}</span>
                <span>{{item.remark}}</span>
              </dd>
            </dl>
          </div>
        </div>
        <div v-for="item in orderInfo" class="wrapper">
          <div class="order-info">
            <div class="row">
              <label>订单编号：</label>
              <span>{{item.code}}</span>
            </div>
            <div class="row">
              <label>订单状态：</label>
              <span>{{item.orderState}}</span>
            </div>

            <div v-for="orders in item.cars">
              <div class="row">
                <label>商品明细：</label>
                <span>{{orders.sku}}  	&nbsp; 	&nbsp;  x{{orders.num}}</span>
              </div>
            </div>
            <div class="row">
              <label>购买时间：</label>
              <span>{{item.createdDt}}</span>
            </div>
          </div>
          <div class="consignee">
            <label>收货人信息：</label>
            <span>{{item.consigneeName}}</span>
            <p>{{item.consigneeDetailAddress}}</p>
          </div>
          <div class="invoice">
            <h5>发票信息：</h5>
            <span>{{item.invoiceTitle}}</span>
          </div>
          <div class="remark">
            <h5>备注信息</h5>
            <p>{{item.mark || '无'}}</p>
          </div>
          <div class="pay-info">
            <h5>结算信息</h5>
            <div class="row">
              <label>支付方式：</label>
              <span>{{item.paymentType |sum}}</span>
            </div>
            <div class="row">
              <label>商品金额：</label>
              <span>商品总金额{{item.goodsValue | toFixedTwo}}元 {{item.cardDiscountAmount||item.couponDiscountAmount?('- 优惠金额'+(item.cardDiscountAmount||item.couponDiscountAmount)+'元'):''}} + 运费0元 = 订单总金额：{{item.total}}元</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <unify-footer></unify-footer>
  </div>
</template>

<script type="text/ecmascript-6">
  import UnifyHeader from '../../components/header/header.vue'
  import UnifyFooter from '../../components/footer/footer.vue'
  import Filter from '@/filter.js'
  import Api from '@/api.js'
  import * as OrderApi from '@/api/order'

  export default {
    data: function () {
      return {
        orderInfo: [],
        logistics: {},
        stateList: [{
          label: '提交订单,待付款',
          current: false,
          time: '',
          prompt: '您的订单已提交，请您点此'
        }, {
          label: '付款成功,生产中',
          current: false,
          time: '',
          prompt: '您的订单已付款成功，我们将进行生产，在<em>7个工作日</em>的生产周期后，我们会将您的印品快递至您的手中。'
        }, {
          label: '快递发货中',
          current: false,
          time: '',
          prompt: '您的订单已生产完成，正在快递发货中，具体信息可在下方物流信息中查看。'
        }, {
          label: '已签收',
          current: false,
          time: '',
          prompt: '您的商品已签收。如有问题请拨打我们的客服电话：<em>400-6690-999<em>'
        }]
      }
    },
    methods: {
      pay: function (order) {
        if (order.client !== 'pc') {
          if (order.client === 'ios') {
            order.client = '手机端传给雅昌'
          }
          this.$message({
            type: 'info',
            iconClass: "atrup_Message",
            message: `请在${order.client}上完成支付操作!`
          })
          return
        }
        let orderPay = order.paymentType.split('_')[1]
        location.href = `/pay/payOrder?addressId=${order.addressDbId}&userDbId=${order.userDbId}&dbId=${order.dbId}&paymentType=${orderPay}`
      },
      _getExpressInfo: function (orderId) {
        OrderApi.expressOrder(orderId).then(res => {
          if (res.status === 1) {
            let data = res.data
            if (data.trace && data.trace.length && data.trace[0].info && data.trace[0].info.length) {
              data.trace[0].info.forEach(item => {
                let time = item['accept_time'].split(' ')
                time.push(new Date(time[0]))
                item['accept_time'] = time
              })
            }
            this.logistics = Object.assign({}, res, {})
          }
        })
      }
    },
    components: {
      UnifyHeader, UnifyFooter
    },
    watch: {},
    mounted: function () {
      this.setMinHeight(this.$refs.container, document.body.scrollHeight - 50 - 132 - 92 - 14)
      let dbId = this.getQueryString("id")
      Api.Order.queryOrder({
        orderDbId: dbId
      }).then((result) => {
        let list = result.data
        list.forEach(order => {
          let goodsValue = 0
          order.cars.forEach(goods => {
            goodsValue += goods.total
          })
          order.goodsValue = goodsValue
        })
        this.orderInfo = list
        let revert = () => {
          this.stateList.forEach((item) => {
            item.current = false
          })
        }
        this.stateList[0].time = this.orderInfo[0].createdDt
        if (this.orderInfo[0].status === 11) {
          revert()
          this.stateList[3].current = true
          return
        }
        if (this.orderInfo[0].status >= 10) {
          revert()
          this.stateList[2].current = true
          this._getExpressInfo(this.orderInfo[0].code)
          return
        }
        if (this.orderInfo[0].status >= 3) {
          revert()
          this.stateList[1].current = true
          this.stateList[1].time = this.orderInfo[0].orderPayment.payFinishedTime
          return
        }
        if (this.orderInfo[0].status === 1) {
          revert()
          this.stateList[0].current = true
        }
      })
    },
    created: function () {

    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/sass">

  .order-info {
    .wrapper {
      width: 1152px;
      margin: 0 auto;
      overflow: hidden;
    }
    .container {
      padding: 14px 0 92px;
      background: #f9f9f9;
    }
    .bread-crumbs {
      ul {
        overflow: hidden;
      }
      li {
        float: left;
        margin-right: 10px;
        &:after {
          position: relative;
          top: -1px;
          display: inline-block;
          content: '>';
          color: #999;
          margin-left: 10px;
          line-height: 40px;
        }
        a {
          color: #999;
        }
      }
      .current {
        color: #a00912;
        &:after {
          content: '';
        }
      }
      a, span {
        line-height: 40px;
      }
    }

    .flow-chart {
      .flow-prompt {
        margin-top: 40px;
        line-height: 58px;
        background: #eee;
        border: 1px solid #d2d2d2;
        border-left: 0;
        border-right: 0;
        .prompt {
          font-size: 16px;
          font-weight: 500;
          em {
            font-style: normal;
            color: #990000;
          }
        }
        .pay-btn {
          display: inline-block;
          margin-left: 16px;
          padding: 0 1em;
          line-height: 32px;
          font-size: 12px;
          color: #fff;
          background: #990000;
          border-radius: 5px;
        }
      }
      .state-list {
        display: block;
        padding-top: 40px;
        text-align: center;
        font-size: 0;
        .state-icon-1 .icon {
          background-image: url('./image/1_1.png');
        }
        .state-icon-1.current .icon {
          background-image: url('./image/1.png');
        }
        .state-icon-2 .icon {
          background-image: url('./image/2_1.png');
        }
        .state-icon-2.current .icon {
          background-image: url('./image/2.png');
        }
        .state-icon-3 .icon {
          background-image: url('./image/3_1.png');
        }
        .state-icon-3.current .icon {
          background-image: url('./image/3.png');
        }
        .state-icon-4 .icon {
          background-image: url('./image/4_1.png');
        }
        .state-icon-4.current .icon {
          background-image: url('./image/4.png');
        }
        .item.current label {
          color: #990000;
        }
        .item {
          position: relative;
          display: inline-block;
          width: 156px;
          margin-left: 104px;
          font-size: 14px;
          vertical-align: top;
          text-align: center;
          .icon {
            display: block;
            width: 104px;
            height: 104px;
            margin: 0 auto 14px;
            background-size: 100% 100%;
          }
          label {
            color: #999;
          }
          .time {
            display: block;
            color: #999;
          }
          &:after {
            position: absolute;
            top: 52px;
            left: -104px;
            content: '';
            width: 104px;
            height: 0;
            border-bottom: 3px dashed #ccc;
          }
          &:first-child {
            margin-left: 0;
            &:after {
              display: none;
            }
          }
        }
      }
    }
    .logistics-info {
      padding-top: 20px;
      .row {
        display: block;
      }
      .logistics-details {
        margin-top: 30px;
        background: #f3f3f3;
        dt {
          line-height: 40px;
          padding-left: 20px;
          border-bottom: 1px solid #e7e7e7;
        }
        dd {
          padding-left: 20px;
          line-height: 38px;
          .date{
            margin-right: 16px;
          }
          .weeks{
            font-weight: 500;
            margin-right: 10px;
          }
          .time{
            margin-right: 16px;
          }
        }
      }
    }
    .headings {
      margin-top: 20px;
      line-height: 36px;
      border: 1px solid #d2d2d2;
      border-left: 0;
      border-right: 0;
      background: #eee;
      font-size: 16px;
    }
    .order-info, .consignee, .invoice, .remark, .pay-info {
      color: #666;
      font-size: 16px;
      padding: 25px 0;
      border-bottom: 1px dashed #BFBFBF;
    }
    .consignee {
      padding-top: 20px;
      p {
        line-height: 1.8;
      }
    }
    .pay-info {
      border: 0;
    }
    h5 {
      font-size: 16px;
      line-height: 32px;
    }
    .row {
      font-size: 16px;
      line-height: 36px;
      color: #666;
      label {
        font-weight: 400;
      }
      span {
        font-weight: 200;
      }
    }
  }

</style>
